<template>
  <div id="doQuestion">
    <a-split
        :style="style"
        min="0.3"
        max="0.5"
        default-size="0.4"
    >
      <template #first>
        <QuestionDescription v-if="question.id" :question="question"/>
      </template>
      <template #second>
        <div>
          <a-split
              direction="vertical"
              :style="style"
              min="0.1"
              max="0.9"
              default-size="0.6"
          >
            <template #first>
              <div style="height: 100%; background: #fff;">
                <CodeEditor
                    :language="form.language"
                    :value="form.code"
                    :handle-change="handleChange"
                    @submitQuestion="submitQuestion"
                    :style="{height: 'calc(100% - 43px)', borderRadius: '5px'}"
                />
              </div>
            </template>
            <template #second>
              <QuestionResult :resultId="resultId" :key="resultId" @accepted="accepted"/>
            </template>
          </a-split>
        </div>
      </template>
    </a-split>
  </div>
</template>

<script lang="ts" setup>
import CodeEditor from "/src/components/editor/CodeEditor.vue";
import MarkdownViewer from "/src/components/editor/MarkdownViewer.vue";
import {defineProps, onMounted, ref, watch} from "vue";
import {ProblemShowModeEnum, ProblemSubmitStatusEnum} from "/src/common/enums/problem";
import QuestionDescription from "./QuestionDescription.vue";
import QuestionResult from "./QuestionResult.vue";
import {ProblemControllerService, ProblemRecordControllerService} from "../../apis";
import {Message} from "@arco-design/web-vue";
import {useStore} from "vuex";

const store = useStore();
const props = defineProps({
  questionId: String,
  style: {
    type: Object,
    default: {
      height: '84vh',
      width: '100%',
      minWidth: '500px',
      borderRadius: '5px',
    },
  },
  mode: {
    type: String,
    default: '0',
  },
  accepted: {
    type: Function,
    default: () => {console.log()},
  }
});
const question = ref({});
const form = ref({});
const languageOptions = ref([]);
const resultSpinShow = ref(false)
const resultId = ref("")
let loginUser = {};

const submitQuestion = async (language) => {
  const res = await ProblemControllerService.submit({
    problemId: props.questionId,
    code: form.value.code,
    userId: loginUser.id,
    language,
  });
  if (res.code === 200) {
    Message.success(res.msg);
    resultSpinShow.value = true;
    resultId.value = res.data;
  } else {
    Message.error(res.msg);
  }
};
const handleChange = (value) => {
  form.value.code = value;
};
const getData = async () => {
  let res = await ProblemControllerService.get(props.questionId);
  if (res.code === 200) {
    question.value = res.data;
  } else {
    Message.error(res.msg);
  }
  res = await ProblemControllerService.listLanguage();
  if (res.code === 200) {
    languageOptions.value = res.data;
  } else {
    Message.error(res.msg);
  }
  loginUser = await store.dispatch("user/getLoginUser");
}
onMounted(() => {
  getData();
});
</script>

<style scoped></style>
